<template>
	<view>
		<!-- 顶部 -->
		<view class="" style="margin-top: 55px;">
			<view class="" :style="[navbarStyle]"
				style="padding: 20px 10px 4px 10px;z-index: 99;display: flex;justify-content: space-between;position: fixed;width: 100%;left: 0;top: 0;">

				<view class="" style="display: flex;">
					<u-icon size="55" name="arrow-left" @click="backtoItem"></u-icon>


					<view v-if="scrollTop > 40" style="display: flex;align-items: center;" :style="[navtitleStyle]">
						<image src="@/static/ui/jinhao.png" style="width: 20px; height: 20px;"></image>
						<p style="margin-left: 4px; font-weight: 1000;">{{ topicInfo.title }}</p>
					</view>

				</view>

				<view class="" style="display: flex;">
					<view v-if="scrollTop>80" class=""
						style="border-radius: 20px;background-color: aquamarine;padding: 5px 10px;">
						<span>海鲜市场</span>
						<view class="">
							<!-- <u-icon size="30" name="rewind-right-fill"></u-icon> -->
						</view>
					</view>
					<u-icon size="55" name="more-dot-fill"></u-icon>
				</view>


			</view>
			<view class="" style="display: flex;align-items: center;justify-content: space-between;padding-left: 10px;">
				<view class="" style="align-items: center;display: flex;">
					<img src="@/static/ui/jinhao.png" alt="" style="height: 20px;width: 20px;">
					<span style="font-size: 35rpx;font-weight: 1000;margin-left: 5px;">{{topicInfo.title}}</span>
				</view>
				<view class="">
					<view class=""
						style="border-radius: 20px;background-color: black;color: white;font-size: 30rpx;padding: 7px 20px;">
						+收藏
					</view>
				</view>

			</view>

			<view class=""
				style="padding-left: 10px;display: flex;justify-content: space-between;align-items: center;margin-top: 10px;">
				<view class="" style="display: flex;align-items: center;">
					<img src="@/static/ui/jinhao.png" alt="" style="width: 20px;height: 20px;">
					<span style="font-size: 25rpx;margin-left: 6px;">{{topicInfo.popularity}}人气</span>
					<span style="color: #ccc;margin: 0 4px;">|</span>
					<span style="font-size: 25rpx;">207.6万浏览</span>
				</view>
				<view class="">
					<view class=""
						style="border-radius: 20px 0px 0 20px;background-color: aquamarine;padding: 10px 10px 10px 30px;">
						<span>海鲜市场</span>
						<view class="">
							<!-- <u-icon size="30" name="rewind-right-fill"></u-icon> -->
						</view>
					</view>
				</view>

			</view>
			<!-- 副标题 -->
			<view class="" style="padding-left: 10px;">
				<span style="">{{topicInfo.subheading}}</span>
			</view>
			<!-- 轮播相关热点 -->
			<view class="" style="margin-top: 10px;padding-left: 10px;" v-if="relativeTopicList.length !== 0">
				<scroll-view scroll-x="true" class="scrollView">
					<view class="scrollItem" v-for="(topicItem,index) in relativeTopicList" :key="topicItem.id"
						style="margin-left: 5px;">
						<view class="" style="display: flex;align-items: center;padding: 5px 20px 5px 5px;">
							<image src="@/static/ui/jinhao.png" style="width: 20px;height: 20px;"></image>
							<p style="margin-left: 4px;">{{topicItem.title}}</p>
						</view>

					</view>


				</scroll-view>
			</view>

			<!-- 两个按钮 -->
			<view class="" style="display: flex;margin-top: 10px;z-index: 99;" :style="[tabStyle]">
				<view v-for="(buttonItem,indexb) in topicInfo.topicInnerSortList" :key="indexb"
					:style="{ backgroundColor: currentTab === indexb ? '#ffff00' : 'white',fontWeight: currentTab === indexb ? 'bold' : '' }"
					style="border-radius: 20px;color: black;padding: 5px 13px;margin-left: 12px;"
					@click="changeCurrentTab">
					{{buttonItem}}
				</view>

			</view>
		</view>

		<view class="">
			
			<swiper :current="currentTab" :style="{height:currentTab === 0 ?swiperHeight1+'px' : swiperHeight2+'px'}"
				@change="changeSwiperItem" style="margin-top: 15px;">
				<swiper-item>
					<view class="swiperItem1">
						<view class="" style="background-color: white;margin: 0 10px;">
							<Dynamic v-if="clickSkuInfo.id" :price="clickSkuInfo.price" :imgList="clickSkuInfo.imgList"
								:avatar="clickSkuInfo.avatar" :name="clickSkuInfo.name"
								:publishTime="clickSkuInfo.publishTime" :content="clickSkuInfo.content"
								:topicList="clickSkuInfo.topicList" @clickTaolun="clickTaolun(clickSkuInfo)">
							</Dynamic>
							<Dynamic v-for="(item,index) in list" :key="index" :price="item.price" :imgList="item.imgList"
								:avatar="item.avatar" :name="item.name" :publishTime="item.publishTime"
								:topicList="item.topicList" :content="item.content" :isLike="item.isLike"
								:isGiveReward="item.isGiveReward" :likeNumber="item.likeNumber"
								:giveRewardNumber="item.giveRewardNumber" :chatNumber="item.chatNumber"
								@clickDynamic="clickDynamic(index)" @clickUser="clickUser(item.id)"
								@clickFocus="clickFocus(index)" @clickThumbsup="clickThumbsup(item.id)"
								@clickGiveReward="clickGiveReward(item.id)" @clickChat="clickChat(item.id)" @clickTaolun="clickTaolun(item)">
							</Dynamic>
						</view>
					</view>
			
				</swiper-item>
				<swiper-item>
					<view class="swiperItem2">
						<view class="" style="background-color: white;margin: 0 10px;">
							<Dynamic v-for="(item,index) in newList" :key="index" :price="item.price"
								:imgList="item.imgList" :avatar="item.avatar" :name="item.name"
								:publishTime="item.publishTime" :content="item.content" :topicList="item.topicList" @clickTaolun="clickTaolun(item)">
							</Dynamic>
						</view>
			
					</view>
			
				</swiper-item>
			</swiper>
			
		</view>
		
		<popupComponent v-if="popupShow" ref="popupComponent"></popupComponent>

	</view>
</template>
<script>
	import popupComponent from '../hotMarketDetail/components/popupComponent.vue'
	import Dynamic from '../../components/qizai-dynamic/Dynamic.vue'
	export default {
		components: {
			Dynamic,
			popupComponent
		},
		mounted() {

			if (this.clickSkuInfo.id) {
				//如果是点击sku进来的话,需要通知后端去重
				this.getTopicDetail(this.topicInfo.id, 0, this.clickSkuInfo.id)
			} else {
				//如果是点击话题进来的话，发送请求带参数topicId,sort
				this.getTopicDetail(this.topicInfo.id)
			}
			//发送对最新的数据请求
			this.getTopicDetail(this.topicInfo.id, 1)


		},

		data() {
			return {
				swiperHeight1: 0,
				swiperHeight2: 0,
				currentTab: 0,
				list: [],
				newList: [],
				topicInfo: {},
				clickSkuInfo: {},
				current1: 1,
				current2: 1,
				pages1: 1,
				pages2: 1,
				relativeTopicList: [],
				scrollTop: 0,
				
				popupShow:false,
			}
		},
		computed: {
			tabStyle() {
				return {
					backgroundColor: this.scrollTop > 100 ? 'white' : '',
					position: this.scrollTop > 100 ? 'fixed' : '',
					top: this.scrollTop > 100 ? '40px' : '',
					zIndex: this.scrollTop > 100 ? '99' : '',
					width: this.scrollTop > 100 ? '100%' : ''

				};
			},
			navbarStyle() {
				const opacity = this.scrollTop > 70 ? 1 : this.scrollTop / 70;
				return {
					backgroundColor: `rgba(255, 255, 255, ${opacity})`,
				}
			},
			navtitleStyle() {
				const opacity = this.scrollTop > 80 ? 1 : this.scrollTop / 80;
				return {
					opacity: opacity,
				};
			}
		},
		onLoad: function(option) {
			this.topicInfo = JSON.parse(decodeURIComponent(option.topicInfo))

			this.relativeTopicList = JSON.parse(decodeURIComponent(option.relativeTopic))
			if (option.topicSkuInfo) {
				const skuInfo = JSON.parse(decodeURIComponent(option.topicSkuInfo))
				this.clickSkuInfo = {
					id: skuInfo.id,
					avatar: skuInfo.photoUrl,
					name: skuInfo.nickName,
					publishTime: skuInfo.createTime,
					content: skuInfo.content,
					imgList: skuInfo.imgUrlList,
					price: skuInfo.price,
					topicList: skuInfo.topicList
				}
			}


		},
		methods: {
			//点击显示讨论弹出层
			clickTaolun(item) {
				console.log("点击讨论");
				this.popupShow = true
				this.$nextTick(() => {
				//触发子组件
				this.$refs.popupComponent.toPopupShow(item)
				})
			},
			changeCurrentTab() {
				this.currentTab = this.currentTab === 0 ? 1 : 0
			},
			changeSwiperItem(e) {
				//换
				this.currentTab = e.detail.current
			},
			initSwiperHeightListener(flag) {
				setTimeout(() => {
					uni.createSelectorQuery().select('.swiperItem' + flag).boundingClientRect(rect => {
						if (flag === 1) {
							this.swiperHeight1 = rect.height;

						} else if (flag === 2) {

							this.swiperHeight2 = rect.height;
						}
					}).exec()
				}, 100)

			},
			//flag表示是否去除点击进入的sku
			//sort为热门还是新发
			async getTopicDetail(topicId, sort = 0, skuId) {
				if (sort === 0) {
					if (this.current1 <= this.pages1) {
						let form = {
							current: this.current1,
							size: 3,
							topicId: topicId,
							clickSkuId: skuId,
							sort: sort
						}
						this.current1++

						//如果是热门
						let result = await this.$u.api.getTopicDetail(form)
						this.pages1 = result.pages
						this.list = this.list.concat(result.records.map((item) => {
							return {
								id: item.id,
								avatar: item.photoUrl,
								name: item.nickName,
								publishTime: item.createTime,
								content: item.content,
								imgList: item.imgUrlList,
								price: item.price,
								topicList: item.topicList
							};
						}))
						this.initSwiperHeightListener(1);
					}

				} else if (sort === 1) {
					if (this.current2 <= this.pages2) {
						let form = {
							current: this.current2,
							size: 3,
							topicId: topicId,
							clickSkuId: skuId,
							sort: sort
						}
						this.current2++
						//如果是最新
						let result = await this.$u.api.getTopicDetail(form)
						this.pages2 = result.pages
						this.newList = this.newList.concat(result.records.map((item) => {
							return {
								id: item.id,
								avatar: item.photoUrl,
								name: item.nickName,
								publishTime: item.createTime,
								content: item.content,
								imgList: item.imgUrlList,
								price: item.price,
								topicList: item.topicList
							};
						}))
						this.initSwiperHeightListener(2);
					}
				}
			},
			backtoItem() {
				uni.navigateBack()
			},



		},
		onReachBottom() {
			if (this.clickSkuInfo.id) {
				if (this.currentTab === 1) {
					//最新的触底不能排除点击的元素
					this.getTopicDetail(this.topicInfo.id, this.currentTab)

				} else {

					this.getTopicDetail(this.topicInfo.id, this.currentTab, this.clickSkuInfo.id)
				}

			} else {
				this.getTopicDetail(this.topicInfo.id, this.currentTab)
			}
		},
		onPageScroll(e) {
			console.log(e.scrollTop);
			this.scrollTop = e.scrollTop
		}
	}
</script>

<style lang="scss" scoped>
	.scrollView {
		width: 100%;
		white-space: nowrap;

		.scrollItem {
			display: inline-block;

			border-radius: 20px;
			background-color: #ccc;

			// p{
			// 	margin-left: 5px;
			// }
		}
	}
</style>